import React from 'react';
import Header from './components/Header';
import {renderRoutes} from "react-router-config";
import {actions} from './components/Header/store';

const App = (props) => {
  // console.log('props:',props)
  /** renderRoutes方法会往props里注入一个route属性,参看client/index.js和react-ssr.js
   * 我们在client/index.js或react-ssr.js中调用renderRoutes方法会帮我们渲染一级路由
   * 渲染二级路由的时,也就是这里的时候,props会被注入一个route属性,包括当前即下级子路由的信息*/
  /*
    [dev:start]   route:
    [dev:start]    { path: '/',
    [dev:start]      component: [Function: App],
    [dev:start]      exact: false,
    [dev:start]      key: 'app',
    [dev:start]      routes: [ [Object], [Object] ] } }
  */
  return (
    <div>
      {/** ↓默认只有路由级组件能拿到staticContext,故我们需要向下传递*/}
      <Header staticContext={props.staticContext}/>
      {/*{Routes.map(route => (*/}
      {/*  <Route {...route}/>*/}
      {/*))}*/}
      {/**↓能渲染多级路由配置表*/}
      {renderRoutes(props.route.routes)}
    </div>
  )
};

App.loadData = (store) => {
  return store.dispatch(actions.getHeaderInfo());
};

export default App;
